<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-06 21:14:27
 * @LastEditTime: 2019-11-08 13:49:40
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../css/local.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<style type="text/css">
		.head-index {
			background-color: #cd1b21;
			color: #fff;
			font-weight: 700;
		}

		.body-no-bottom-index {
			position: relative;
		}

		.content {
			background: #ffffff;
			height: 100%;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.van-search {
			padding-bottom: 0;
			background: #cd1b21 !important;
		}

		a {
			text-decoration: none;
			color: #000;
		}

		img {
			width: 100%;
			height: auto;
			display: block;
			border: 0;
		}

		body {
			background: #fff;
			color: #666;
		}

		html,
		body,
		div,
		dl,
		dt,
		dd,
		ol,
		ul,
		li,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		p,
		blockquote,
		pre,
		button,
		fieldset,
		form,
		input,
		legend,
		textarea,
		th,
		td {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
			color: #666;
		}

		li {
			list-style: none;
		}

		.divHeight {
			width: 100%;
			height: 10px;
			background: #f5f5f5;
			position: relative;
			overflow: hidden;
		}

		.b-line {
			position: relative;
		}

		.b-line:after {
			content: '';
			position: absolute;
			z-index: 2;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			border-bottom: 1px solid #e2e2e2;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			-webkit-transform-origin: 0 100%;
			transform-origin: 0 100%;
		}

		.aui-flex {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			padding: 15px;
			position: relative;
		}

		.aui-flex-box {
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			min-width: 0;
			font-size: 14px;
			color: #333;
		}

		/* 必要布局样式css */

		.icon {
			width: 20px;
			height: 20px;
			display: block;
			border: none;
			float: left;
			background-size: 20px;
			background-repeat: no-repeat;
		}

		.m-slider {
			overflow-x: hidden;
			width: 100%;
			position: relative;
		}

		.slider-wrapper {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			height: 100%;
			-webkit-transform: translate3d(0px, 0px, 0px);
			transform: translate3d(0px, 0px, 0px);
			position: relative;
			z-index: 1;
			-webkit-transition-property: -webkit-transform;
			transition-property: -webkit-transform;
			transition-property: transform;
			transition-property: transform, -webkit-transform;
		}

		.slider-item {
			width: 100%;
			height: 100%;
			-webkit-flex-shrink: 0;
			-ms-flex-negative: 0;
			flex-shrink: 0;
			background: #f6f6f6;
		}

		.slider-item img {
			width: 100%;
			height: auto;
			display: block;
			border: none;
		}



		.aui-palace {
			padding: 0.5rem 0;
			position: relative;
			overflow: hidden;
		}

		.aui-palace-grid {
			position: relative;
			float: left;
			padding: 1px;
			width: 20%;
			box-sizing: border-box;
			margin: 5px 0;
		}

		.aui-palace-grid-icon {
			width: 38px;
			height: 38px;
			margin: 0 auto;
		}

		.aui-palace-grid-icon img {
			display: block;
			width: 100%;
			height: 100%;
			border: none;
		}

		.aui-palace-grid-text {
			display: block;
			text-align: center;
			color: #333;
			font-size: 0.85rem;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			padding-top: 0.2rem;
		}

		.aui-palace-grid-text h2 {
			font-size: 0.78rem;
			font-weight: normal;
			color: #999999;
		}

		.aui-arrow {
			text-align: right;
			color: #394154;
			padding-right: 12px;
			position: relative;
			font-size: 0.85rem;
		}

		.aui-arrow span {
			color: #999;
			font-size: 0.82rem;
		}

		.aui-arrow:after {
			content: " ";
			display: inline-block;
			height: 7px;
			width: 7px;
			border-width: 2px 2px 0 0;
			border-color: #b2b2b2;
			border-style: solid;
			-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
			position: relative;
			top: -2px;
			position: absolute;
			top: 50%;
			margin-top: -5px;
			right: 2px;
			border-radius: 1px;
		}

		.aui-title-time {
			font-weight: normal;
			font-size: 1.1rem;
			color: #e91b4c;
			line-height: 1.4;
			float: left;
		}

		.aui-fleTen {
			padding: 12px 15px;
		}

		.aui-flex-sel {
			padding: 0;
		}

		.aui-flex-sel .aui-flex-box h1 {
			color: #e5063d;
			font-weight: normal;
			font-size: 0.85rem;
			padding-left: 1rem;
			padding-top: 0.5rem;
			width: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			word-wrap: break-word;
			word-break: break-all;
		}

		.aui-flex-sel .aui-flex-box p {
			color: #8f8f8f;
			font-size: 0.75rem;
			padding-left: 1rem;
			width: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			word-wrap: break-word;
			word-break: break-all;
		}

		.aui-flex-sel .aui-flex-box-one {
			position: relative;
		}

		.aui-flex-sel .aui-flex-box-one:before {
			content: '';
			position: absolute;
			z-index: 0;
			top: 0;
			right: 0;
			height: 100%;
			border-right: 1px solid #D9D9D9;
			-webkit-transform: scaleX(0.5);
			transform: scaleX(0.5);
			-webkit-transform-origin: 100% 0;
			transform-origin: 100% 0;
		}

		.aui-flex-sel .aui-flex-box {
			position: relative;
		}

		.aui-flex-sel .aui-flex-box span {
			position: absolute;
			top: 0;
			right: 0.6rem;
			width: 2.2rem;
			height: 2.2rem;
		}

		.aui-flex-sel-one .aui-flex-box h1 {
			color: #333;
		}

		.aui-flex-sel-one .aui-flex-box img {
			width: 70%;
			margin: 0 auto;
		}

		.aui-palace-two {
			padding: 0;
		}

		.aui-palace-two .aui-palace-grid {
			width: 50%;
			position: relative;
			margin: 0;
		}

		.aui-palace-two .aui-palace-grid .aui-info-text {
			float: left;
			width: 60%;
		}

		.aui-palace-two .aui-palace-grid .aui-info-img {
			float: right;
			width: 40%;
		}

		.aui-palace-two .aui-palace-grid:not(:nth-child(2n)):before {
			content: '';
			position: absolute;
			z-index: 0;
			top: 0;
			right: 0;
			height: 100%;
			border-right: 1px solid #D9D9D9;
			-webkit-transform: scaleX(0.5);
			transform: scaleX(0.5);
			-webkit-transform-origin: 100% 0;
			transform-origin: 100% 0;
		}

		.aui-info-text h2 {
			font-weight: normal;
			font-size: 0.85rem;
			padding-left: 1rem;
			padding-top: 0.5rem;
			width: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			word-wrap: break-word;
			word-break: break-all;
			color: #333;
		}

		.aui-info-text p {
			color: #8f8f8f;
			font-size: 0.75rem;
			padding-left: 1rem;
			width: auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			word-wrap: normal;
			word-wrap: break-word;
			word-break: break-all;
		}

		.fl-line {
			position: relative;
			font-size: 1rem;
			padding-left: 0.3rem;
		}

		.fl-line:after {
			content: '';
			position: absolute;
			z-index: 0;
			top: 4px;
			left: 0;
			background: #e03a68;
			width: 3px;
			height: 15px;
			border-radius: 100px;
		}

		.aui-flex-sel-two .aui-flex-box h1 {
			text-align: center;
			padding: 0.4rem 0 0 0;
		}

		.aui-flex-sel-two .aui-flex-box p {
			text-align: center;
			padding: 0;
		}

		.aui-recommend {
			background: #f1f1f1;
		}

		.aui-recommend h2 {
			width: 100%;
			padding: 0.5rem 0;
			font-weight: normal;
			font-size: 0.9rem;
			color: rgba(0, 0, 0, 0.7);
			text-align: center;
		}

		.aui-list-theme {
			overflow: hidden;
			position: relative;
			padding: 10px 0 1px 10px;
		}

		.aui-list-theme-item {
			width: 46.888%;
			float: left;
			overflow: hidden;
			margin: 0 9px 10px 1px;
			background: #fff;
			border-radius: 3px;
			border: 1px solid #e4e4e4;
		}

		.aui-list-img {
			height: auto;
			width: 100%;
			overflow: hidden;
			position: relative;
		}

		.aui-list-img img {
			width: 100%;
			height: auto;
			display: block;
			background-color: #FFF;
			border: none;
		}

		.aui-flex-box span {
			color: #616161;
			font-size: 0.9rem;
		}

		.aui-list-title {
			padding: 1px 10px 10px 10px;
		}

		.aui-list-title h3 {
			font-size: 0.9rem;
			width: auto;
			color: #363636;
			margin-top: 0.5rem;
			line-height: 1.4;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			font-weight: normal;
			margin-bottom: 0.5rem;
		}

		.aui-list-title .aui-flex {
			padding: 10px 0 5px 0;
			position: absolute;
			bottom: 10px;
		}

		.aui-list-title p {
			text-align: left;
			font-size: 0.85rem;
			color: #a4a4a4;
			height: 1.3rem;
		}

		.aui-list-title p em {
			color: #e10038;
			font-style: normal;
			font-size: 0.95rem;
		}

		.aui-list-title p i {
			color: #999;
			text-decoration: line-through;
			font-style: normal;
			font-size: 0.8rem;
		}

		.aui-list-title span {
			color: #686868;
			font-size: 0.8rem;
			margin-bottom: 0.5rem;
			display: block;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak >
		<div class="init-full">
			<van-nav-bar class="head" title="品牌优购" left-arrow @click-left="onClickLeft"></van-nav-bar>
			<div class="body-no-bottom">
				<div class="content">
					<div class="m-slider" data-ydui-slider>
						<div class="slider-wrapper">
							<div class="slider-item">
								<a href="javascript:;">
									<img src="../image/banner-2.jpg" alt="">
								</a>
							</div>
						</div>
						<div class="slider-pagination"></div>
					</div>
					<div class="aui-palace b-line">
						<a href="javascript:;" class="aui-palace-grid">
							<div class="aui-palace-grid-icon">
								<img src="../image/nav-001.png" alt="">
							</div>
							<div class="aui-palace-grid-text">
								<h2>制动系统</h2>
							</div>
						</a>
						<a href="javascript:;" class="aui-palace-grid">
							<div class="aui-palace-grid-icon">
								<img src="../image/nav-002.png" alt="">
							</div>
							<div class="aui-palace-grid-text">
								<h2>滤清器</h2>
							</div>
						</a>
						<a href="javascript:;" class="aui-palace-grid">
							<div class="aui-palace-grid-icon">
								<img src="../image/nav-003.png" alt="">
							</div>
							<div class="aui-palace-grid-text">
								<h2>油品</h2>
							</div>
						</a>
						<a href="javascript:;" class="aui-palace-grid">
							<div class="aui-palace-grid-icon">
								<img src="../image/nav-004.png" alt="">
							</div>
							<div class="aui-palace-grid-text">
								<h2>雨刮</h2>
							</div>
						</a>
						<a href="javascript:;" class="aui-palace-grid">
							<div class="aui-palace-grid-icon">
								<img src="../image/nav-005.png" alt="">
							</div>
							<div class="aui-palace-grid-text">
								<h2>冷冻液</h2>
							</div>
						</a>
					</div>
					<div>

						<div class="aui-recommend b-line">
							<!-- <h2>精品推荐</h2> -->
							<div class="aui-list-theme">
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-014.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>刹车片 DC0727</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-015.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>刹车片 DC0695</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-016.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>刹车盘</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-017.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>滤清器 SO-0107Z</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-018.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>滤清器 SA-0208</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-019.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>滤清器 SA-0308</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-020.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>滤清器 SA-0408</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
								<a href="javascript:;" class="aui-list-theme-item">
									<div class="aui-list-img">
										<img src="../image/pd-021.png" alt="">
									</div>
									<div class="aui-list-title">
										<h3>滤清器 SA-0508</h3>
										<p><em>会员可见</em> </p>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		var userInfo = FLD.getUserInfo();

		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false
			},
			created: function () {
				var that = this;



			},
			methods: {
				onClickLeft() {
					api.closeWin();

				}
			}
		})
	};
</script>

</html>